<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Flask React</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/RichEditor.css') }}" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
    <div id="target"></div>
</div>
<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>-->
<script type="text/javascript" src="http://o7z6eyjps.bkt.clouddn.com/cd86bdca-54a5-11e6-819a-5600002448cajquery.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>-->
<script src="http://o7z6eyjps.bkt.clouddn.com/ebeec884-54a5-11e6-819a-5600002448careact.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>-->
<script src="http://o7z6eyjps.bkt.clouddn.com/fa8afbd8-54a5-11e6-819a-5600002448careact-dom.min.js"></script>
<!--<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>-->
<script src="http://o7z6eyjps.bkt.clouddn.com/08294b3c-54a6-11e6-819a-5600002448caJSXTransformer.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>-->
<script src="http://o7z6eyjps.bkt.clouddn.com/1cca492e-54a6-11e6-819a-5600002448cabrowser.js"></script>
<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.js"></script>-->
<script type="text/javascript" src="http://o7z6eyjps.bkt.clouddn.com/286bf7e6-54a6-11e6-819a-5600002448caimmutable.js"></script>
<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.1/es6-shim.js"></script>-->
<script type="text/javascript" src="http://o7z6eyjps.bkt.clouddn.com/34bbfdde-54a6-11e6-819a-5600002448caes6-shim.js"></script>
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.7.0/Draft.css">-->
<link rel="stylesheet" href="http://o7z6eyjps.bkt.clouddn.com/49a817e6-54a6-11e6-819a-5600002448caDraft.css">
<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.7.0/Draft.js"></script>-->
<script type="text/javascript" src="http://o7z6eyjps.bkt.clouddn.com/5b97ed28-54a6-11e6-819a-5600002448caDraft.js"></script>
<script type="text/babel">
      'use strict';

      const {
        Editor,
        EditorState,
        RichUtils,
        convertToRaw,
        DefaultDraftBlockRenderMap,
      } = Draft;

      const {Map} = Immutable;

      class RichEditorExample extends React.Component {
        constructor(props) {
          super(props);

          this.state = {
            editorState: EditorState.createEmpty(),
          };

          this.focus = () => this.refs.editor.focus();
          this.onChange = (editorState) => this.setState({editorState});

          this.handleKeyCommand = (command) => this._handleKeyCommand(command);
          this.toggleBlockType = (type) => this._toggleBlockType(type);
          this.toggleInlineStyle = (style) => this._toggleInlineStyle(style);

          this.logState2 = () => console.log(JSON.stringify(this.state.editorState.getCurrentContent().toJS()).toString());
          this.logState = () => {
              //const myContentState = JSON.stringify(convertToRaw(this.state.editorState.getCurrentContent()));
              const tmp = convertToRaw(this.state.editorState.getCurrentContent());
              const myContentState = JSON.stringify(tmp);
              console.log(tmp);
              const data = {'data': myContentState}
              console.log('over');
              ///*
              $.post(
                  '/react_ajax',
                  data,
                  function(result){
                    //const r = JSON.parse(result);
                    //console.log(result.success);
                    if(result.success == 1) {
                        window.location.href = '/after_editor';
                    } else {
                        alert('保存错误');
                    }
                  }
              );
              //*/
          };
        }

        _handleKeyCommand(command) {
          const {editorState} = this.state;
          const newState = RichUtils.handleKeyCommand(editorState, command);
          if (newState) {
            this.onChange(newState);
            return true;
          }
          return false;
        }

        _toggleBlockType(blockType) {
          this.onChange(
            RichUtils.toggleBlockType(
              this.state.editorState,
              blockType
            )
          );
        }

        _toggleInlineStyle(inlineStyle) {
          this.onChange(
            RichUtils.toggleInlineStyle(
              this.state.editorState,
              inlineStyle
            )
          );
        }

        render() {
          const {editorState} = this.state;

          let className = 'RichEditor-editor';
          var contentState = editorState.getCurrentContent();
          if (!contentState.hasText()) {
            if (contentState.getBlockMap().first().getType() !== 'unstyled') {
              className += ' RichEditor-hidePlaceholder';
            }
          }

          return (
          <div>
            <div className="RichEditor-root">
              <BlockStyleControls
                editorState={editorState}
                onToggle={this.toggleBlockType}
              />
              <InlineStyleControls
                editorState={editorState}
                onToggle={this.toggleInlineStyle}
              />
              <div className={className} onClick={this.focus}>
                <Editor
                  blockStyleFn={getBlockStyle}
                  customStyleMap={styleMap}
                  editorState={editorState}
                  handleKeyCommand={this.handleKeyCommand}
                  onChange={this.onChange}
                  placeholder="填写内容..."
                  ref="editor"
                  spellCheck={true}
                />
              </div>
            </div>
            <input
                onClick={this.logState}
                style={styleMap.button}
                type="button"
                value="Log State"
            />
          </div>
          );
        }
      }

      const styleMap = {
        CODE: {
          backgroundColor: 'rgba(0, 0, 0, 0.05)',
          fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',
          fontSize: 16,
          padding: 2,
        },
        button: {
          marginTop: 10,
          textAlign: 'center',
        },
        CENTER: {
          textAlign: 'center',
        },
        BIG: {
          fontSize: 32,
        },
      };

      function getBlockStyle(block) {
        switch (block.getType()) {
          case 'blockquote': return 'RichEditor-blockquote';
          case 'atomic': return 'RichEditor-at-center';
          default: return null;
        }
      }

      class StyleButton extends React.Component {
        constructor() {
          super();
          this.onToggle = (e) => {
            e.preventDefault();
            this.props.onToggle(this.props.style);
          };
        }

        render() {
          let className = 'RichEditor-styleButton';
          if (this.props.active) {
            className += ' RichEditor-activeButton';
          }

          return (
            <span className={className} onMouseDown={this.onToggle}>
              {this.props.label}
            </span>
          );
        }
      }

      const BLOCK_TYPES = [
        {label: 'H1', style: 'header-one'},
        {label: 'H2', style: 'header-two'},
        {label: 'H3', style: 'header-three'},
        {label: 'H4', style: 'header-four'},
        {label: 'H5', style: 'header-five'},
        {label: 'H6', style: 'header-six'},
        {label: 'Blockquote', style: 'blockquote'},
        {label: '居中', style: 'atomic'},
        {label: 'UL', style: 'unordered-list-item'},
        {label: 'OL', style: 'ordered-list-item'},
        {label: 'Code Block', style: 'code-block'},
      ];

      const BlockStyleControls = (props) => {
        const {editorState} = props;
        const selection = editorState.getSelection();
        const blockType = editorState
          .getCurrentContent()
          .getBlockForKey(selection.getStartKey())
          .getType();

        return (
          <div className="RichEditor-controls">
            {BLOCK_TYPES.map((type) =>
              <StyleButton
                key={type.label}
                active={type.style === blockType}
                label={type.label}
                onToggle={props.onToggle}
                style={type.style}
              />
            )}
          </div>
        );
      };

      var INLINE_STYLES = [
        {label: '加粗', style: 'BOLD'},
        {label: '斜体', style: 'ITALIC'},
        {label: '下划线', style: 'UNDERLINE'},
        {label: '代码加亮', style: 'CODE'},
        {label: '行级居中', style: 'CENTER'},
        {label: '字体变大', style: 'BIG'},
      ];

      const InlineStyleControls = (props) => {
        var currentStyle = props.editorState.getCurrentInlineStyle();
        return (
          <div className="RichEditor-controls">
            {INLINE_STYLES.map(type =>
              <StyleButton
                key={type.label}
                active={currentStyle.has(type.style)}
                label={type.label}
                onToggle={props.onToggle}
                style={type.style}
              />
            )}
          </div>
        );
      };

      ReactDOM.render(
        <RichEditorExample />,
        document.getElementById('target')
      );
    </script>
</body>
</html>